<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/info-reg.css"/>
    <title>选课系统</title>
    <style type="text/css">
        .error {
            color: Red;
            font-size: 13px;
            margin-left: 5px;
            padding-left: 16px;
        }
    </style>
</head>

<body>
<div class="title">
    <h2>个人信息注册(*为必填项)</h2>
</div>
<form id="fm">
    <div class="main">
        <p class="short-input ue-clear">
            <label>*用户名：</label>
            <input id="usr" name="username" type="text"/><span id="validate" style="color: red"></span>
        </p>

        <p class="short-input ue-clear">
            <label>*密码：</label>
            <input name="password" type="password" style="width:258px;height:27px;border:1px solid #C5D6E0"/>
        </p>
        <p class="short-input ue-clear">
            <label>*姓名：</label>
            <input name="name" type="text"/>
        </p>
        <p class="short-input ue-clear">
            <label>*性别：</label>
            <select name="sex" style="width:50px;height:30px;border:1px solid #C5D6E0">
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
        </p>
        <p class="short-input ue-clear">
            <label>*出生日期：</label>
            <input name="birthday" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
        </p>
        <p class="long-input ue-clear">
            <label>就读学校：</label>
            <input name="school" type="text"/>
        </p>
        <p class="long-input ue-clear">
            <label>*联系方式：</label>
            <input name="phone" type="text"/>
        </p>
        <p class="long-input ue-clear">
            <label>电子邮箱：</label>
            <input name="email" type="text"/>
        </p>
        <p class="short-input ue-clear">
            <label>个人评价：</label>
            <textarea name="tip" placeholder="请输入内容"></textarea>
        </p>
        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否想要现在发布简历：</label>
        <input type="checkbox" name="status" checked>
        <div class="btn ue-clear">
            <input style="height:50px;width:150px;background-color:#68B86C;color:white;border-radius:5px" type="submit"  value="提交"/>
            <input style="height:50px;width:150px;background-color:#EFF6FA;color:black;border-radius:5px" type="reset"  value="清空"/>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/WdatePicker.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript">
    showRemind('input[type=text], textarea', 'placeholder');

    //jquery validate插件前端输入验证
    $("#fm").validate({
        rules: {
            username: {
                required: true,
                minlength: 4,
                maxlength: 10
            },
            password: {
                required: true
            },
            name: {
                required: true
            },
            birthday: {
                required: true
            },
            school: {
                required: true
            },
            phone: {
                required: true
            }
        },
        messages: {
            username: {
                required: "*不能为空！",
                maxlength: $.validator.format("*长度不得大于10个字符！"),
                minlength: $.validator.format("*长度不得小于4个字符！")
            },
            password: {
                required: "*不能为空！"
            },
            name: {
                required: "*不能为空！"
            },
            birthday: {
                required: "*不能为空！"
            },
            school: {
                required: "*不能为空！"
            },
            phone: {
                required: "*不能为空！"
            }
        },
        submitHandler: function (form) {
            validate();  //用自定义函数提交表单
        }
    });

    //ajax验证用户名成功后，再进行注册
    function validate() {
        $.ajax({
            url: "../student/register",
            type: "post",
            dataType: "json",
            data: $("#fm").serializeArray(),
            success: function (data) {
                console.log(data);
                if (data.code == 400) {
                    $("#validate").html(data.msg);
                } else {
                    alert("注册成功！");
                    window.open('/', '_top');
                }
            }
        });
    }

</script>
</html>
